<!doctype html>
<html>
	<head>
		<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!--当前页面的三要素-->
		<title>GN的LBS地图地位系统</title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="description" content="">
		<link rel="stylesheet" href="iconfont/iconfont.css"/>
		<!--css,js-->
		<style type="text/css">
			*{margin:0;padding:0;}
			body{font-size:12px;font-family:微软雅黑;background:url("images/bg.jpg") no-repeat;background-size:cover;}
			/*gn_map start*/
			.gn_map{width:1000px;height:600px;margin:100px auto;position:relative;}
			.gn_map h1{background:#3397e4;text-align:center;font-weight:500;font-size:24px;line-height:50px;color: #fff;}
			.gn_map .gn_con{width:100%;height:550px;background:#E8F2D8;}
			.gn_map .iconfont{color: #fff;font-size: 30px;margin-right: 20px;}
			.gn_map .g_search .gn_text{width:500px;height:36px;padding-left:10px;color:#666;outline:none;font-size: 14px;font-family: 微软雅黑;}
			.gn_map .g_search .g_btn{width:100px;height:40px;border: none;font-size: 14px;color: #fff;background-color:#5E5EE5;cursor:pointer;outline: none}
			.gn_map .g_search .g_btn:hover{background:#4A4AEA;}
			.gn_map .g_search{position:absolute;top:80px;left:200px;box-shadow:1px 1px 65px 1px #000;}
			/*end gn_map*/

			/*menu start*/
			.menu{border:1px solid #eee;width:100px;background:#fff;box-shadow:1px 1px 5px 0px #000;}
			.menu ul li{list-style:none;line-height:34px;padding-left:10px;}
			.menu ul li:hover{background:#F9F7F7;}
			/*end menu*/
		</style>

	</head>
<body>
	<!--gn_map start-->
	<div class="gn_map">
		<h1><i class="iconfont">&#xe662;</i>叫外卖上饿了么-搜索定位</h1>
		<div class="gn_con" id="gn_container"></div>
		<div class="g_search"><input class="gn_text" placeholder="请输入你的订餐地址（学校，写字楼或街道）"/><input class="g_btn" type="submit" value="搜   索"/></div>
	</div>
	<!--end map-->
	

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<!--地图搜索js api-->
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=fc5a4fb79a7f7f3d41ff14116aae565d"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<!--地图缩放，距离测量,添加标记js api-->
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=fc5a4fb79a7f7f3d41ff14116aae565d&plugin=AMap.MouseTool"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script>
    /*var map = new AMap.Map('gn_container', {
        resizeEnable: true,
        zoom:11,
        center: [116.397428, 39.90923]
        
    });*/
var map = new AMap.Map("gn_container", {
        resizeEnable: true
    });
    var menu=new ContextMenu(map);
    function ContextMenu(map) {
        var me = this;
        this.mouseTool = new AMap.MouseTool(map); //地图中添加鼠标工具MouseTool插件
        this.contextMenuPositon = null;
        var content = [];
        content.push("<div class='menu'>");
        content.push("    <ul class='context_menu'>");
        content.push("        <li onclick='menu.zoomMenu(0)'>缩小</li>");
        content.push("        <li class='split_line' onclick='menu.zoomMenu(1)'>放大</li>");
        content.push("        <li class='split_line' onclick='menu.distanceMeasureMenu()'>距离量测</li>");
        content.push("        <li onclick='menu.addMarkerMenu()'>添加标记</li>");
        content.push("    </ul>");
        content.push("</div>");
        this.contextMenu = new AMap.ContextMenu({isCustom: true, content: content.join('')});//通过content自定义右键菜单内容
        //地图绑定鼠标右击事件——弹出右键菜单
        map.on('rightclick', function(e) {
            me.contextMenu.open(map, e.lnglat);
            me.contextMenuPositon = e.lnglat; //右键菜单位置
        });
    }

    ContextMenu.prototype.zoomMenu = function zoomMenu(tag) {//右键菜单缩放地图
        if (tag === 0) {
            map.zoomOut();
        }
        if (tag === 1) {
            map.zoomIn();
        }
        this.contextMenu.close();
    }
    ContextMenu.prototype.distanceMeasureMenu=function () {  //右键菜单距离量测
        this.mouseTool.rule();
        this.contextMenu.close();
    }
    ContextMenu.prototype.addMarkerMenu=function () {  //右键菜单添加Marker标记
        this.mouseTool.close();
        var marker = new AMap.Marker({
            map: map,
            position: this.contextMenuPositon //基点位置
        });
        this.contextMenu.close();
    }


	$(function(){
		$(".g_btn").click(function(){
		var text=$(".gn_text").val();
		map.setCity(text);
		});
	});

</script>

</body>
</html> 